<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page session = "true" %>
<!DOCTYPE html>
<html>
<head>
<base href="/resources/">
<title>Insert title here</title>
<style type="text/css">
#slidelist {
	width: 200px;
	height: 800px;
	float: left;
	border: 1px solid;
}

#canvas {
	width: 800px;
	height: 800px;
	float: left;
	border: 1px solid;
}
#editmenu{
	width:1000px;
	height:100px;
	float:top;
	border: 1px solid;
}
</style>

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.multidraggable-1.8.8.js"></script>
<script type="text/javascript">
	$(function() {
		$(".multidraggable").multidraggable();
	});
</script>
<script>
	function fnAlert(slide){
		var img = document.getElementById("slide3");
		console.log(img);
		alert(img.style.posLeft);
		alert(img.style.posTop);
		
	}
</script>
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
	<div id="editmenu">
		<nav>
			<a href="addslide">슬라이드추가</a>&nbsp;&nbsp;<a href="">슬라이드삭제</a>&nbsp;&nbsp;<a href="">슬라이드 액션설정</a>
		</nav>
	</div>
	<div id="slidelist">
		<%-- <%
			for (int i = 0; i < (Integer)session.getAttribute("slideNo"); i++) {
		%> 
		<img src="makeshape" class="multidraggable" id="slide<%=i%>">
		<%
			}
		%> 
 --%>
 		<%int i = 0; %>
		<c:forEach var="list" items="${preziList }">
			<div id="slide<%=i++%>" class="step multidraggable">
				${list.content }
			</div>
		</c:forEach> 
	</div>
	<div id="canvas"></div>
	<input type="button" id="btnTest" onclick="fnAlert();" value="test"/>


</body>
</html>
